<template>
  <van-popup 
    :show="show" 
    position="left" 
    class="currency-selector-popup"
    :close-on-click-overlay="true"
    @close="handleClose"
  >
    <div class="currency-selector">

      <!-- 关闭按钮 -->
      <div class="close-btn" @click="handleClose">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      <!-- 页面标题 -->
      <div class="page-title">
        {{ title }}
      </div>

      <!-- 标签页 -->
      <div class="tabs">
        <div 
          v-for="tab in headerList" 
          :key="parseInt(tab.dictValue)"
          :class="['tab', { active: activeTab === parseInt(tab.dictValue) }]"
          @click="activeTab = parseInt(tab.dictValue)"
        >
          {{ _t18(tab.dictLabel) }}
          <div v-if="activeTab === parseInt(tab.dictValue)" class="tab-indicator"></div>
        </div>
      </div>

      <!-- 币种列表 -->
      <div class="currency-list">
        <div 
          v-for="currency in mockCurrencyList" 
          :key="currency.symbol"
          class="currency-item"
          @click="selectCurrency(currency)"
        >
          <!-- 左侧币种信息 -->
          <div class="currency-info">
            <div class="currency-name">
              {{ currency.coinUpperCase }}
              <span class="currency-pair">/USDT</span>
            </div>
          </div>

          <!-- 中间价格 -->
          <div :class="[
            getChangeUp(currency) ? 'up-custom' : 'down-custom',
            'currency-price'
          ]">
            {{ priceFormat(tradeStore.allCoinPriceInfo[currency?.coin]?.close) }}
          </div>

          <!-- 右侧涨跌幅 -->
          <div 
            :class="[
              'currency-change',
              getChangeUp(currency) ? 'positive' : 'negative'
            ]"
          >
            <span v-if="getChangeUp(item)">+</span><span v-else>-</span>
            {{ tradeStore.allCoinPriceInfo[currency?.coin]?.priceChangePercent}}%
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, computed } from 'vue'
import { dict } from '@/api/common'
import { useTradeStore } from '@/store/trade'
import { priceFormat } from '@/utils/decimal.js'

const tradeStore = useTradeStore()
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: 'USDT量化套利'
  }
})

const emit = defineEmits(['update:show', 'select'])

// 标签页配置
// const tabs = [
//   { key: 'USD', label: 'USD' },
//   { key: 'Web3', label: 'Web3' },
//   { key: 'NFT', label: 'NFT' }
// ]

const headerList = ref([])

const getDict = async () => {
  const res = await dict('t_second_coin_type')
  // console.log(res)
  if (res.code == '200') {
    // tabList.value = [...res.data.map(e => e.dictLabel)]
    
    headerList.value = res.data
    // headerList.value = res.data[0].dictCode
    // console.log(headerList.value)
  }
}

function getChangeUp(item) {
  // console.log(item)
  let chazhi = Number(tradeStore.allCoinPriceInfo[item?.coin]?.close) - Number(tradeStore.allCoinPriceInfo[item?.coin]?.openPrice) 
  // if (item.coin == '')
  return Number(chazhi) >= 0
}

const activeTab = ref(2)

// 币种数据（根据UI图提供的数据）
const currencies = {
  USD: [
    { symbol: 'BTC', price: '117998', change: -0.11 },
    { symbol: 'ETH', price: '3753.97', change: 0.49 },
    { symbol: 'TRUMP', price: '10.1759', change: -0.54 },
    { symbol: 'BCH', price: '560.9', change: 0.88 },
    { symbol: 'XRP', price: '3.17891', change: -0.42 },
    { symbol: 'DCC', price: '4.176', change: -0.66 },
    { symbol: 'CCY', price: '0.734', change: -0.74 },
    { symbol: 'OMT', price: '1.0698', change: -1.04 },
    { symbol: 'UAM', price: '1.168', change: -0.43 },
    { symbol: 'XPY', price: '0.5506', change: -0.24 },
    { symbol: 'CTG', price: '1.9302', change: -0.67 },
    { symbol: 'DDT', price: '1.362', change: -0.53 },
    { symbol: 'XTY', price: '0.2063', change: -2.08 },
    { symbol: 'DIR', price: '3.4636', change: 6.63 }
  ],
  Web3: [
    { symbol: 'ETH', price: '3753.97', change: 0.49 },
    { symbol: 'MATIC', price: '0.85', change: 1.23 },
    { symbol: 'LINK', price: '15.67', change: -0.89 },
    { symbol: 'UNI', price: '8.45', change: 2.15 },
    { symbol: 'AAVE', price: '245.67', change: -1.34 },
    { symbol: 'COMP', price: '67.89', change: 0.76 }
  ],
  NFT: [
    { symbol: 'APE', price: '1.85', change: -2.34 },
    { symbol: 'SAND', price: '0.45', change: 1.67 },
    { symbol: 'MANA', price: '0.38', change: -0.92 },
    { symbol: 'ENJ', price: '0.28', change: 3.45 },
    { symbol: 'CHZ', price: '0.12', change: -1.23 },
    { symbol: 'FLOW', price: '0.89', change: 0.56 }
  ]
}
// const showTab =
const mockCurrencyList = computed(() =>
  tradeStore.secondContractCoinList.filter((it) => it.coinType === activeTab.value)
)

console.log(mockCurrencyList.value)

// 根据当前标签页过滤币种
const filteredCurrencies = computed(() => {
  return currencies[activeTab.value] || []
})

// 关闭弹窗
const handleClose = () => {
  
  emit('update:show', false)
}

// 选择币种
const selectCurrency = (currency) => {
  // showTab.value = parseInt(currency.name)
  emit('select', currency)
  handleClose()
}

onMounted(() => {
  // getInit()
  getDict()
  nextTick(() => {
    
    mockCurrencyList.value.forEach((item, idx) => {
      // renderChart(idx, item)
    })
  })
})
</script>

<style lang="scss" scoped>
.currency-selector-popup {
  width: 100%;
  height: 100vh;
  max-width: 280px;
}

.up-custom {
  color: #00b386;
}
.down-custom {
  color: #ff4444;
}

.currency-selector {
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  z-index: 10;
  
  &:hover {
    color: #333;
  }
}

.page-title {
  text-align: left;
  padding: 20px 20px;
  padding-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-top: 20px;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 10px 10px 0;
  position: relative;
  gap: 8px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 2px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e0e0e0;
  
  &.active {
    color: #fff;
    font-weight: 600;
    background: #000;
    border-color: #000;
  }
  
  .tab-indicator {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
  }
}

.currency-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.currency-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  
  &:hover {
    background-color: #f9f9f9;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.currency-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.currency-name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
  
  .currency-pair {
    font-size: 12px;
    color: #999;
    font-weight: 400;
  }
}

.currency-price {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  // color: #000;
}

.currency-change {
  flex: 1;
  text-align: right;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  min-width: 80px;
  text-align: center;
  
  &.positive {
    background: #00b386;
    color: #fff;
  }
  
  &.negative {
    background: #ff4d4f;
    color: #fff2f0;
  }
}

// 滚动条样式
.currency-list::-webkit-scrollbar {
  width: 4px;
}

.currency-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.currency-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.currency-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 